<template>
  <div class="rePage">
    <ElCard
      style="height: 100%; position: relative"
      :style="`--el-card-padding:${padding};`"
      :shadow="shadow"
    >
      <slot />
    </ElCard>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  shadow: {
    type: String,
    default: "never"
  },
  padding: {
    type: String || Number,
    default: "16px"
  }
});
</script>

<style lang="scss" scoped>
.rePage {
  // flex: 1;
  width: 100%;
  height: 100%;

  :deep(.el-card) {
    border: 0;

    .el-card__body {
      // height: 100%;
      min-height: calc(100vh - 114px);
    }
    .splitter-pane-resizer.vertical {
      height: calc(100% + 32px);
      margin: -16px 0;
    }
    .vue-splitter-container {
      min-height: calc(100vh - 146px);
    }
  }
}
.card-no-padding {
  :deep(.el-card) {
    border: 0;
    .el-card__body {
      padding: 0 !important;
      min-height: calc(100vh - 114px);
    }
  }
}
.nominheihgt{
  :deep(.el-card) {
    border: 0;

    .el-card__body {
      // height: 100%;
      min-height: 0;
    }
    .splitter-pane-resizer.vertical {
      height: calc(100% + 32px);
      margin: -16px 0;
    }
    .vue-splitter-container {
      min-height: 0;
    }
  }
}
</style>
